<template>
    <div>
        <div ref="warp" class="container"></div>
    </div>
</template>

<script>
import echarts from 'echarts';

export default {
    data() {
        return {
            dataService:[],
            dataGoods:[]
        };
    },
    mounted() {
        this.showChart();
    },
    methods: {
        showChart() {
            let myChart = echarts.init(this.$refs.warp);
            // posroom().then(res => {
            //     this.dataService = res.dataService;
            //     this.dataGoods = res.dataGoods;
            //     myChart.setOption(this.posOptions, true);
            // });
            myChart.setOption(this.posOptions, true);
        }
    },
    computed: {
        posOptions() {
            return {
                backgroundColor: '#2c343c',
                title: {
                    text: '销售额占比统计',
                    left: 'center',
                    top: 20,
                    textStyle: {
                        color: '#ccc'
                    }
                },

                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },

                visualMap: {
                    show: false,
                    min: 80,
                    max: 600,
                    inRange: {
                        colorLightness: [0, 1.3]
                    }
                },
                series: [
                    {
                        name: '季度',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: [
                            {value: 335, name: '第一季度'},
                            {value: 310, name: '第二季度'},
                            {value: 274, name: '第三季度'},
                            {value: 235, name: '第四季度'},
                        ].sort(function (a, b) { return a.value - b.value; }),
                        roseType: 'radius',
                        label: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        labelLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        },
                        itemStyle: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },

                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function (idx) {
                            return Math.random() * 200;
                        }
                    }
                ]
            };
        }
    }
};
</script>

<style>
.container {
    width: 1000px;
    height: 500px;
    margin: auto;
}
</style>